<template>

  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="日程标题" style="width: 220px;">
        <el-input placeholder="输入标题" v-model="searchSchedule.title"></el-input>
      </el-form-item>
      <el-form-item label="优先级" style="width: 220px;">
        <el-select placeholder="请选择优先级" v-model="searchSchedule.priority">
          <el-option
              v-for="item in priorityTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :style="{ color: getOptionColor(item.value) }"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadSchedule">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height:60px;font-size:20px;">日程安排</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddUser">添加日程</el-button>
  </div>
    <el-card>
      <el-table :data="scheduleArr" style="width: 100%">
        <el-table-column type="index" label="编号" width="100" align="center"></el-table-column>
        <el-table-column label="优先级" align="center" width="120">
          <template #default="scope">
          <span :style="{ color: getOptionColor(scope.row.priority) }">
            {{ priorityTypeFormatter(scope.row, null, scope.row.priority, null) }}
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
        <el-table-column prop="reminderTime" label="提醒时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="editSchedule(scope.row.id)">编辑</el-button>
            <el-button link type="primary" @click="deleteSchedule(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="日程标题">
            <el-input placeholder="请输入" v-model="saveSchedule.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日程优先级">
            <el-select placeholder="请选择优先级" v-model="saveSchedule.priority">
             <el-option
              v-for="item in priorityTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :style="{ color: getOptionColor(item.value) }"
          ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="活动开始时间">
              <el-date-picker    type="datetime"
                                 format="YYYY-MM-DD HH:mm:ss"
                                 value-format="YYYY-MM-DD HH:mm:ss"          style="width: 100%"v-model="saveSchedule.startTime"/>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="活动结束时间">
              <el-date-picker
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"          style="width: 100%"
                  v-model="saveSchedule.endTime"
              />
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="活动提醒时间">
            <el-date-picker    type="datetime"
                               format="YYYY-MM-DD HH:mm:ss"
                               value-format="YYYY-MM-DD HH:mm:ss"          style="width: 100%"
                               v-model="saveSchedule.reminderTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动内容详情">
            <el-input
                type="textarea"
                placeholder="请输入"
                v-model="saveSchedule.content"
                :rows="3"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveScheduleForm">保存</el-button>
    </template>
  </el-dialog>
  </template>

  <script setup>
    import axios from "axios";
    import { onMounted, ref } from "vue";
    import qs from "qs";
    import { ElMessage } from "element-plus";
    //定义变量控制弹窗是否出现
    const dialogVisible = ref(false);
    //定义变量用来控制弹窗的标题
    const dialogTitle = ref('新建日程');
    const saveSchedule= ref({});
    const handleClose = ()=>{
      if(confirm('您确认要关闭本窗口吗?')){
        //关闭弹窗,并清空双向绑定的表单数据
        dialogVisible.value = false;
        saveSchedule.value = {};
      }
    }
    const searchSchedule = ref({ priority: '', title: '' });
    const scheduleArr = ref([]);
    const priorityTypeArr = ref([]);
    const beforeAddUser = ()=>{
      dialogVisible.value = true;
      dialogTitle.value = '添加日程安排';
    }

    const loadSchedule = () => {
      let data = qs.stringify(searchSchedule.value);
      axios.get(BASE_URL + '/oa1/schedule/select?' + data)
          .then((response) => {
            if (response.data.code == 2000) {
              scheduleArr.value = response.data.data;
              console.log(scheduleArr.value);
            } else {
              ElMessage.error(response.data.msg);
            }
          })
    }
    const resetSearch = ()=>{
      //清空之前的搜索条件
      searchSchedule.value = {};
      //重新加载所有的用户数据
      loadSchedule();
    }
    onMounted(() => {
      loadSchedule();
      loadDictOption(priorityTypeArr, 'priority');
    })

    const getOptionColor = (value) => {
      value=String (value);
      switch (value) {
        case '10':
          return 'red'; // 紧急 - 红色
        case '20':
          return 'orange'; // 重要 - 橙色
        case '30':
          return 'green'; // 一般 - 绿色
        default:
          return 'black'; // 默认颜色
      }
    };

    const priorityTypeFormatter = (row, column, cellValue, index) => {
      if (!priorityTypeArr.value) {
        console.warn('Priority type array is not loaded yet.');
        return cellValue;
      }
      for (let item of priorityTypeArr.value) {
        if (item.value == cellValue) {
          console.log(`Matched priority: ${cellValue} with label: ${item.label}`);
          return item.label;
        }
      }
      console.warn(`No match found for priority: ${cellValue}`);
      return cellValue;
    }

    const  saveScheduleForm  = ()=>{
      let data = qs.stringify(saveSchedule.value);
      axios.post(BASE_URL + '/oa1/schedule/save', data)
          .then((response) => {
            if (response.data.code == 2000) {
              ElMessage.success('保存成功');
              dialogVisible.value = false;
              loadSchedule();
            } else {
              ElMessage.error(response.data.msg);
            }
          })
    }
    const deleteSchedule = (id) => {
      if (confirm('您确认要删除该日程安排吗?')) {
        axios.post(BASE_URL + '/oa1/schedule/delete/' + id)
            .then((response) => {
              if (response.data.code == 2000) {
                ElMessage.success('删除成功');
                loadSchedule();
              } else {
                ElMessage.error(response.data.msg);
              }
            })
      }
    }
    const editSchedule = (id) => {
      dialogVisible.value = true;
      dialogTitle.value = '修改日程安排';
      axios.get(BASE_URL + '/oa1/schedule/select?id='+id)
          .then((response) => {
            if (response.data.code == 2000) {
              saveSchedule.value = response.data.data[0];
            } else {
              ElMessage.error(response.data.msg);
            }
          })
}
  </script>
<style scoped>

</style>